<template>
  <div class="swipe-list-wrap">
    <template>
        <el-table :data="tableData" stripe border>
            <el-table-column prop="_id" label="ID" align="center" style="width: 120"></el-table-column>
            <el-table-column prop="name" label="图片名称" align="center"></el-table-column>
            <el-table-column label="商品图片" align="center" width="160">
                <template slot-scope="scope">
                <el-image v-for="(item, index) in scope.row.img" :key="index" style="width: 60px; height: 60px" :src="item.url" :preview-src-list="[item.url]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope" align="center">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
  </div>
</template>

<script>
import { getSwipe, deleteSwipe } from '../../utils/api/mini'
export default {
    data () {
        return {
            tableData: []
        }
    },
    created () {
        this.getList()
    },
    methods: {
        handleEdit (row) {
            this.$router.push({
                path: `/addSwipeImg/${row._id}` 
            })
        },
        // 删除
        async handleDelete (row) {
            let res = await deleteSwipe(row._id)
            if (res.code === 200) {
            this.$message({
                message: '删除成功',
                type: 'success'
            })
                this.getList()
            }
        },
        async getList () {
            let res = await getSwipe()
            this.tableData = res.items
        }
    }
}
</script>

<style lang="less" scoped>
    .el-image {
        margin-right: 6px;
    }
</style>